import React, { useEffect, useState } from 'react';
import { useNavigate, useLocation } from 'react-router-dom';
import TheImage from '@/components/TheImage';
import { Table, Button, Tag } from "antd";
import { Decimal } from 'decimal.js';
import TheButton from '@/components/TheButton';
import "../../style/style.less";

export default function OrderTable(props) {
  const data = props.orderInfo // 组件传参
  const navigate = useNavigate()
  const columns = [
    {
      title: '商品头图',
      dataIndex: 'goodsImage',
      key: 'goodsImage',
      render(text) {
        return <TheImage src={[text]} width={80} height={80}></TheImage>
      }
    },
    {
      title: '商品名称',
      dataIndex: 'goodsName',
      key: 'goodsName',
      render: (text, record) => {
        return (
          <div style={{ display: 'flex', alignItems: 'center', position: 'relative' }}>
            <span style={{ margin: '0 10px' }}>{record.goodsName}</span>
            <span>{record.sku}</span>
            {
              record.giftId !== '0' &&
              <div className='gift'>赠</div>
            }
          </div>
        )
      },
    },
    {
      title: '单价(元)',
      dataIndex: 'orderPrice',
      key: 'orderPrice',
      render(text, render) {
        return <>
          {text ? '￥' + Decimal(text).div(Decimal(100)).toNumber().toFixed(2) : '-'}{
            render.activityType === 'SECKILL_HOMEPAGE' && <Tag  color='red' >秒杀价</Tag>
          }{
            render.activityType === 'TEAM_BUY' && <Tag color="red">拼团价</Tag>
          }
        </>
      }
    },
    {
      title: '数量(件)',
      dataIndex: 'orderProductCount',
      key: 'orderProductCount',
      render(text) {
        return 'x' + text
      }
    },
    {
      title: '优惠分摊(元)',
      dataIndex: 'detailDiscountsPrice',
      key: 'detailDiscountsPrice',
      render(text) {
        return text ? '￥' + Decimal(text).div(Decimal(100)).toNumber().toFixed(2) : '￥0.00'
      }
    },
    {
      title: '实付金额(元)',
      dataIndex: 'detailPayPrice',
      key: 'detailPayPrice',
      render(text, record) {
        return record.detailPayPrice ? '￥' + Decimal(text).div(Decimal(100)).toNumber().toFixed(2) : '￥0.00'
      }
    },
    {
      title: '状态',
      dataIndex: 'orderDetailState',
      key: 'orderDetailState',
      render(text) {
        let orderStatus = ''
        switch (text) {
          case '3':
            orderStatus = "待付款"
            break;
          case '4':
            orderStatus = "待发货"
            break;
          case '5':
            orderStatus = "待收货"
            break;
          case '9':
            orderStatus = "交易成功"
            break;
          case '0':
            orderStatus = "交易关闭"
            break;
          default:
            orderStatus = "-"
        }
        return orderStatus
      }
    },
    {
      title: '售后状态',
      dataIndex: 'salesStatus',
      key: 'salesStatus',
      render(text, record) {
        let label = ''
        switch (text) {
          // case 1:
          //   label = '退款中'
          //   break
          // case 2:
          //   label = '退款中，平台已同意，待寄回商品'
          //   break
          // case 3:
          //   label = '退款中，商品已寄回，待平台确认'
          //   break
          // case 4:
          //   label = '退款失败'
          //   break
          // case 5:
          //   label = '买家退货超时自动关闭'
          //   break
          // case 6:
          //   label = '卖家拒收商品'
          //   break
          // case 7:
          //   label = '买家取消退款'
          //   break
          // case 9:
          //   label = '退款成功'
          //   break
          // case 0:
          //   label = '退款关闭'
          //   break
          case 1: case 2: case 3: case 5: case 7: case 6:
            label = "售后中"
            break
          case 4: case 9: case 0:
            label = "售后详情"
            break
          default:
            label = '-'
            break
        }
        return label !== "-" ? <Button type="link" onClick={() => toOrderSalesDetail(record.shopSalesReturnId)}>{label}</Button> : label
      }
    },
  ]
  const [dataSource, setDataSource] = useState([]) //表格数据
  useEffect(() => {
    getData()
  }, [])

  // 获取接口数据
  const getData = () => {
    setDataSource(data)
  }

  let toOrderSalesDetail = (id) => {
    navigate('/orderManage/afterSaleOrder/detail', {
      state: {
        id
      }
    })
  }

  return (
    <div className='warp-box'>
      <Table
        style={{ margin: '20px 0' }}
        columns={columns}
        dataSource={dataSource}
        rowKey={'goodsName'}
        pagination={false}
      />
    </div >
  )
}